<!DOCTYPE html>
<html lang="en">

  <head>
    <title>three.js webgl - lines - spheres</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  </head>
  <link rel="stylesheet" href="../../public/cesium/Build/CesiumUnminified/Widgets/widgets.css?1681425516139">
  <link rel="stylesheet" href="../../public/libora/css/libora.css?1681425516139">
  <link rel="stylesheet" href="../../public/libora/style/iconfont.css?1681425516139">
  <link rel="stylesheet" href="../../style/page.css?1681425516139">

  <style>
    .start,
    .end {
      width: 10px;
      height: 10px;
      border: 1px solid #000;
      position: fixed;
      z-index: 9999;
    }

    .start {
      background: #0f0;
    }

    .end {
      background: #f00;
    }

  </style>

  <body>
    <div class="start"></div>
    <div class="end"></div>

    <div class="track-control">
      <label class="switch">
        <input type="checkbox" id="switch" />
        <span class="slider round"></span>
      </label>
    </div>

    <!-- 该文件自动创建, 需要修改buildExamaples.js -->
    <div ref="containerRef" id="cesiumContainer"></div>
    <script src="../../public/lib/turf.min.js"></script>
    <script type="importmap">
        			{
        				"imports": {
        					"cesium": "../../public/cesium/Build/CesiumUnminified/index.js"
        				}
        			}
		</script>

    <style>
      .track-control {
        position: absolute;
        bottom: 40px;
        left: 40px;
        z-index: 9999;
      }

      .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
      }

      .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: 0.4s;
        transition: 0.4s;
      }

      .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: 0.4s;
        transition: 0.4s;
      }

      input:checked+.slider {
        background-color: #4cd137;
      }

      input:focus+.slider {
        box-shadow: 0 0 1px #4cd137;
      }

      input:checked+.slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
      }

      .slider.round {
        border-radius: 34px;
      }

      .slider.round:before {
        border-radius: 50%;
      }

      .log {
        font-size: 32px;
      }

    </style>
    <script>
      window.CESIUM_BASE_URL = "../../public/cesium/Build/CesiumUnminified";
    </script>

    <script type="module">
      import Demo from "../../es6/app/location.js"
      new Demo();
    </script>
  </body>

</html>
